<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>备份列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../static/element-ui-index.css" th:href="@{/element-ui-index.css}">

</head>
<body>
    <div id="dm" class="backup">
        <!-- 搜索栏 -->
        <section class="search-section">
            <el-form ref="form" :model="searchForm" label-width="80px" style="display:flex;">
                <el-form-item label="组织ID">
                    <el-input v-model="searchForm.orgId"></el-input>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker
                            v-model="searchForm.dateRange"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryList">搜索</el-button>
                    <el-button @click="reset">清空</el-button>
                </el-form-item>
            </el-form>
        </section>

        <!-- 列表 -->
        <section class="list-data">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="orgId"
                        label="组织ID">
                </el-table-column>
                <el-table-column
                        prop="taskID"
                        label="任务名称">
                </el-table-column>
                <el-table-column
                        prop="exeTime"
                        label="备份时间">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="recoveryClick(scope.row.id)" type="text" size="small">恢复</el-button>
                        <el-button @click="downloadClick(scope.row.id)" type="text" size="small">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </section>
    </div>
</body>
<!-- import Vue before Element -->
<script src="../static/vue-2.7.14.js" th:src="@{/vue-2.7.14.js}"></script>
<!-- import JavaScript -->
<script src="../static/element-ui-index.js" th:src="@{/element-ui-index.js}"></script>
<script src="../static/axios-1.1.2.min.js" th:src="@{/axios-1.1.2.min.js}"></script>

<script>

    axios.defaults.headers.post['Content-Type'] = 'application/json';
    axios.interceptors.response.use(function (response) {
        const { data, headers } = response
        if(headers['content-type'] && headers['content-type'].indexOf('application/octet-stream') >= 0){
            return response;
        }
        return response.data;
    }, function (error) {
        return Promise.reject(error);
    });
    new Vue({
      el: '#dm',
      data: function() {
        return {
            visible: false,
            searchForm:{
                "orgId":null,
                "dateRange":[],
                "current":1,
                "size":10
            },
            tableData: [

            ],
        }
      },
      methods:{
        downloadClick(id){
            if(!id) return;
            axios.get(`/dm/download?id=${id}`,{params: {}, responseType: 'blob'}).then(res=>{
                const { data, headers } = res
                const fileName = headers['content-disposition'].replace(/.*?filename=(.*)/, '$1')
                // 此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理
                //const blob = new Blob([JSON.stringify(data)], ...)
                const blob = new Blob([data], {type: headers['content-type']})
                let dom = document.createElement('a')
                let url = window.URL.createObjectURL(blob)
                dom.href = url
                dom.download = decodeURI(fileName)
                dom.style.display = 'none'
                document.body.appendChild(dom)
                dom.click()
                dom.parentNode.removeChild(dom)
                window.URL.revokeObjectURL(url)
            })
        },
        recoveryClick(id){
            if(!id) return;
            this.$confirm('此操作会导致部分数据丢失, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.get(`/dm/recover?id=${id}`).then(res=>{
                    if(res.success){
                        this.$message('恢复成功');
                    }else{
                        this.$message.error('恢复失败：'+res.message);
                    }
                })
            }).catch(() => {
            });
            
        },
        queryList(){
            console.log("this.searchForm",this.searchForm);
            axios.post('/dm/backupList',{
                startDate: this.searchForm.dateRange[0],
                endDate: this.searchForm.dateRange[1],
                orgId: this.searchForm.orgId
            }).then(res=>{
                console.log("queryList",res);
                if(res.success){
                    this.tableData = res.data;
                }
            })
        },
        reset(){
            this.searchForm={
                "orgId":null,
                "dateRange":[],
                "current":1,
                "size":10
            };
        }
      },
      mounted(){
            this.queryList();
      }
    })
</script>
<style scoped>
    .search-section{
        margin-top: 30px;

    }
    .list-data{
        padding: 15px;
    }
</style>
</html>

